<!-- 试卷列表 -->
<template>
  <div class="container">
    <!-- 头部描述 -->
    <div class="top-desc">
      <span class="black-text">{{ $t('paperLangList.desc1') }}</span>
      <span class="red-text">{{ $t('paperLangList.desc2') }}</span>
    </div>
    <!-- 查询栏 -->
    <el-form ref="conditionForm" :model="conditionForm" :inline="true" label-position="right" label-width="auto" @submit.native.prevent>
      <el-row>
        <el-col :span="18">
          <el-form-item>
            <el-input :placeholder="$t('paperLangList.inputPaperName')" v-model="conditionForm.title" prefix-icon="el-icon-search"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="searchByFilter">{{ $t('table.search') }}</el-button>
            <el-button type="primary" icon="el-icon-refresh" @click="resetSearchFilter">{{ $t('table.reset') }}</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-row type="flex" justify="end">
            <el-form-item>
              <el-button type="primary" icon="el-icon-circle-plus-outline" @click="openCreateDialog">{{ $t('paperLangList.createPaper') }}</el-button>
            </el-form-item>
          </el-row>
        </el-col>
      </el-row>
    </el-form>
    <!-- 列表栏 -->
    <div class="grid-content">
      <el-table v-loading="listLoading" ref="dataListRef" :key="tableKey" :data="dataList" :element-loading-text="$t('table.loadingText')" border fit stripe highlight-current-row>
        <el-table-column :label="$t('table.id')" type="index" width="50" align="center"/>
        <el-table-column :label="$t('paperLangList.paperCover')" align="center">
          <template slot-scope="scope">
            <el-image :src="scope.row.imgUrl ? scope.row.imgUrl : getDefaultCoverPng()" style="width: 100px; height: 100px" fit="fit"/>
          </template>
        </el-table-column>
        <el-table-column :label="$t('paperLangList.paperName')" align="center" prop="title"/>
        <el-table-column :label="$t('paperLangList.loggingCount')" align="center" prop="questionNum" width="120"/>
        <el-table-column :label="$t('paperLangList.remark')" align="center" prop="note">
          <template slot-scope="scope">
            <span v-if="scope.row.note">{{ scope.row.note }}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('paperLangList.source')" align="center">
          <template slot-scope="scope">
            <span>自制</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('paperLangList.lastPublishTime')" align="center" prop="publishedAt"/>
        <!--<el-table-column :label="$t('paperLangList.status')" align="center" prop="status" width="80">-->
          <!--<template slot-scope="scope">-->
            <!--<span style="color: red" v-if="scope.row.status == '未发布'">{{ scope.row.status }}</span>-->
            <!--<span v-else>{{ scope.row.status }}</span>-->
          <!--</template>-->
        <!--</el-table-column>-->
        <el-table-column :label="$t('table.actions')" align="center" width="260">
          <template slot-scope="scope">
            <el-button type="text" @click="openUpdateDialog(scope.row)">{{ $t('paperLangList.updatePaper') }}</el-button>
            <el-button type="text" @click="openQuestionList(scope.row)">{{ $t('paperLangList.editQuestion') }}</el-button>
            <el-button type="text" @click="openPreview(scope.row)">{{ $t('paperLangList.previewPaper') }}</el-button>
            <!--<el-button type="text" @click="publishPaperAction(scope.row)">{{ $t('paperLangList.publishPaper') }}</el-button>-->
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination :current-page="conditionForm.page" :page-sizes="[5,10,50,100,150,200]" :page-size="conditionForm.pageSize" :total="dataTotal" background layout="total, sizes, prev, pager, next, jumper" @size-change="dataSizeChange" @current-change="dataCurrentChange"/>
      </div>
    </div>
    <!-- 试卷操作弹框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="900px" center @closed="closePaperDialog">
      <paperOperateCom ref="paperOperate" @callbackEmit="saveCallback" />
    </el-dialog>
  </div>
</template>

<script>
import { getPaperList, publishPaper } from '@/api/paper'
import paperOperateCom from './components/paperOperate'
import paperCoverPng from '@/assets/paper_images/paper-cover.png'
export default {
  name: 'Index',
  components: {
    paperOperateCom
  },
  data() {
    return {
      conditionForm: {
        page: 1,
        pageSize: 10,
        title: ''
      },
      tableKey: 0,
      dataList: [],
      dataTotal: 0,
      listLoading: false,
      dialogFormVisible: false,
      dialogTitleArray: {
        addTitle: this.$t('paperLangList.addTitle'),
        updateTitle: this.$t('paperLangList.updateTitle')
      },
      paperId: ''
    }
  },
  computed: {
    'dialogTitle': function() {
      return this.paperId === '' ? this.dialogTitleArray.addTitle : this.dialogTitleArray.updateTitle
    }
  },
  created() {
    this.getPageDataList()
  },
  methods: {
    // 获取试卷列表
    getPageDataList() {
      const _this = this
      _this.listLoading = true
      getPaperList(_this.conditionForm).then(res => {
        _this.listLoading = false
        _this.dataList = res.items
        _this.dataTotal = res.total
      }).catch(err => {
        _this.listLoading = false
        console.info(err)
      })
    },
    // 获取默认封面图片
    getDefaultCoverPng() {
      return paperCoverPng
    },
    dataSizeChange(val) {
      this.conditionForm.pageSize = val
      this.getPageDataList()
    },
    // 翻页
    dataCurrentChange(val) {
      this.conditionForm.page = val
      this.getPageDataList()
    },
    // 搜索
    searchByFilter() {
      if (this.conditionForm.title === '') {
        this.$message({
          message: '试卷名称不能为空',
          type: 'warning'
        })
      } else {
        this.resetPageFilter()
        this.getPageDataList()
      }
    },
    // 重置
    resetSearchFilter() {
      this.conditionForm.title = ''
      this.resetPageFilter()
      this.getPageDataList()
    },
    // 重置分页条件
    resetPageFilter() {
      this.conditionForm.page = 1
      this.conditionForm.pageSize = 10
    },
    // 打开创建试卷窗口
    openCreateDialog() {
      this.paperId = ''
      this.dialogFormVisible = true
    },
    // 打开修改试卷窗口
    openUpdateDialog(row) {
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs.paperOperate.initPaperDetail(row)
      })
    },
    // 监听关闭窗口
    closePaperDialog() {
      this.$refs.paperOperate.initForm()
    },
    // 保存数据后回调
    saveCallback(type, id) {
      this.dialogFormVisible = false
      if (type == 1) {
        this.resetSearchFilter()
      } else if (type == 2) {
        this.$router.push({
          path: '/paper/paper_question',
          query: {
            id: id,
            t: +new Date()
          }
        })
      }
    },
    // 编辑试题
    openQuestionList(row) {
      this.$router.push({
        path: '/paper/paper_question',
        query: {
          id: row.id,
          t: +new Date()
        }
      })
    },
    // 发布试卷
    publishPaperAction(row) {
      const _this = this
      _this.$confirm('确定发布试卷?', '提示', {
        confirmButtonText: this.$t('table.confirm'),
        cancelButtonText: this.$t('table.cancel'),
        type: 'warning'
      }).then(() => {
        publishPaper(row.id).then(res => {
          if (res) {
            _this.$message({
              message: '发布成功',
              type: 'success'
            })
            _this.getPageDataList()
          }
        })
      })
    },
    // 预览
    openPreview(row) {
      this.$router.push({
        path: '/preview/index',
        query: {
          id: row.id,
          type: 'paper',
          t: +new Date()
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .top-desc {
    font-size: 16px;
    font-weight: bold;
    padding: 20px 0;
    .black-text {
      color: #333333;
    }
    .red-text {
      color: red;
    }
  }
</style>
